<?php
/* 
 * semua data diinisialisasi disini
 * agar 1 form ini bisa digunakan untuk tambah dan edit data
 * aturan dari {name} dari field form adalah data[nama_field_database]
 * misal : dalam table jenis kajian ada field nama
 * untuk membuat name dari field form tsb, {name} nya adalah data[nama]
 * proses simpan data menggunakan ajax jquery (bisa dilihat dokumentasinya di jquery)
 * form validationnya menggunakan jquery validation engine (bisa dilihat di google)
 */
 
$id=0;
$nama="";
$published="no";
$lat="-7.302987489892322";
$lng="112.70922798077208";
foreach($kota->result_array() as $row){
	$id = $row['id'];
	$nama = $row['nama'];
	$published=$row['published'];
	$lat=$row['lat'];
	$lng=$row['lng'];
}
?>
<div class="grid_6">
	<div id="success" class="success" style="display:none">Success</div>
	<div id="error" class="error" style="display:none">Error</div>
	<form id="form_kota" action="<?php echo base_url()."setting/kota"?>" class="styled">	

		<label for="name">Nama Kota</label>
		<input id="name" class="textbox validate[required]" type="text" name="data[nama]" id="name" value="<?php echo $nama?>"  />
		<input type="hidden" name="data[published]" value="yes" />
		<label>Peta</label>
		<div id="map" style="height:300px;float:center;"></div>
		<input type="hidden" id="lat" name="data[lat]" value="<?php echo $lat?>" />
		<input type="hidden" id="lng" name="data[lng]" value="<?php echo $lng?>" />
		<input type="submit" value="SIMPAN" class="right button" />
		
	</form>
</div>

<script>
$("#form").validationEngine();

$("#form_kota").submit(function(){
	if($(this).validationEngine('validate')){
		var formInput = $(this).serialize();
		
		$.ajax({
			url: $(this).attr('action'),
			data: formInput,
			beforeSend : function(){
				$.fancybox.showActivity();
				$("#error").hide();
				$("#success").hide();
			},
			success: function(respon){
				var obj = jQuery.parseJSON(respon);
				if(obj.status == 'success'){
					$("#error").hide();
					$("#success").text(obj.msg);
					$("#success").fadeIn(1000);
					$.fancybox.close();
				}else{
					$("#success").hide();
					$("#error").text("Data gagal disimpan");
					$("#error").fadeIn(1000);
				}
				
				$.fancybox.hideActivity();
			},
			type: "POST"
		});
	}
	return false;
});

$(document).ready(function(){
	setTimeout(function(){

		$("#map").gmap3(
			{ action:'init',
				options:{
					center:[<?php echo $lat?>,<?php echo $lng?>],
					zoom: 5
				}
			},
			{ 
				action: 'addMarker',
				lat:<?php echo $lat?>,
				lng:<?php echo $lng?>,
				marker:{
					options:{
						draggable: true,
						animation: google.maps.Animation.DROP
					},
					events:{
						click: function(marker, event, data){
							var map = $(this).gmap3('get'),
							infowindow = $(this).gmap3({action:'get', name:'infowindow'});
							infowindow.open(map, marker);
						},
						dragend: function(marker){
							$(this).gmap3({
								action:'getAddress',
								latLng:marker.getPosition(),
								callback:function(results){
									$("#lat").val(marker.getPosition().lat());
									$("#lng").val(marker.getPosition().lng());
								}
							});
						}
					}
				},
			}
		);
		
	},1000);
});
</script>